<template>
<el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">

  <el-form :model="dataForm" :rules="dataRule" :label-position="labelPosition" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-wdoctorrecuperateIdth="60px">

    <el-form-item label="身体征状" prop="physical">

      <el-input v-model="dataForm.physical" placeholder="身体征状"></el-input>

    </el-form-item>

    <el-form-item label="体质分型" prop="name">

      <el-input v-model="dataForm.name" placeholder="体质分型"></el-input>

    </el-form-item>

    <el-form-item label="健康密码" prop="password">

      <el-input v-model="dataForm.password" placeholder="健康密码"></el-input>

    </el-form-item>

    <el-form-item label="时长" prop="duration">
      <el-input v-model="dataForm.duration" placeholder="时长"></el-input>

    </el-form-item>
    <el-form-item label="食品名称" prop="foodname">
      <el-input v-model="dataForm.foodname" placeholder="食品名称"></el-input>

    </el-form-item>

    <el-form-item label="一级分类">
      <el-select v-model="dataForm.onetype" placeholder="请选择一级分类">
        <el-option v-for="item in options1" :key="item.id" :label="item.remarks" :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>
    
    <el-form-item label="二级分类">
      <el-select v-model="dataForm.twotype" placeholder="请选择二级分类" @click.native="getTow()">
        <el-option v-for="item in options2" :key="item.id" :label="item.remarks" :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="请选择三种症状描述">
      <el-select v-model="dataForm.threetype1" placeholder="请选择三级级分类" @click.native="getThree()">
        <el-option v-for="item in options3" :key="item.id" :label="item.remarks" :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="dataForm.threetype2" placeholder="请选择三级级分类" @click.native="getThree()">
        <el-option v-for="item in options3" :key="item.id" :label="item.remarks" :value="item.id">
        </el-option>

      </el-select>
      <el-select v-model="dataForm.threetype3" placeholder="请选择三级级分类" @click.native="getThree()">
        <el-option v-for="item in options3" :key="item.remarks" :label="item.remarks" :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>
    <p>是否可用</p>
    <el-tooltip :content="'Switch value: ' + dataForm.enable" placement="top">
      <el-switch v-model="dataForm.enable" active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0">
      </el-switch>
    </el-tooltip>
  </el-form>
  <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
</el-dialog>
</template>

<script>
export default {

  watch: {
    'dataForm.onetype': function(newValue, oldValue) {
      this.options2 = null;
      this.options3 = '';
      this.dataForm.threetype1 = '';
      this.dataForm.threetype2 = '';
      this.dataForm.threetype3 = '';
      this.dataForm.twotype = '';
    },
    'dataForm.twotype': function(newValue, oldValue) {

      this.options2 = null;
      this.options3 = '';
      this.dataForm.threetype1 = '';
      this.dataForm.threetype2 = '';
      this.dataForm.threetype3 = '';
    }
  },

  data() {
    let validatePassword = (rule, value, callback) => {
      if (!this.dataForm.id && !/\S/.test(value)) {
        callback(new Error("密码不能为空"));
      } else {
        callback();
      }
    };
    var validateOne = (dataRule, value, callback) => {
      if (value == '' || value == undefined) {
        callback(new Error('请选择一级分类'));
      } else {
        callback();
      }
    };

    return {
      visible: false,

      roleList: [],


      options1: [],

      options2:'',

      options3: [],

      labelPosition: 'top',
      props: {
        value: 'label',
        children: 'cities'
      },
      
      one: "",
      two: '',
      three: '',
      three1: '',
      three2: '',
      three3: '',
      dataForm: {
        password: "",
        id: "",
        name: "",
        foodname: "",
        threetype: "",
        physical: "",
        enable: "",
        onetype: "",
        twotype: '',
        duration: "",
        threetype1: "",
        threetype2: "",
        threetype3: ""
      },
      dataRule: {
        password: [{
          required: true,
          message: '健康密码不能为空',
          trigger: 'blur'
        }],
        name: [{
          required: true,
          message: '体质分型不能为空',
          trigger: 'blur'
        }],
        foodname: [{
          required: true,
          message: '食谱名称不能为空',
          trigger: 'blur'
        }],
        threetype: [{
          type: 'number',
          required: true,
          message: '三级分类不能为空',
          trigger: 'blur'
        }],
        physical: [{
          required: true,
          message: '身体症状不能为空',
          trigger: 'blur'
        }],
        enable: [{
          required: true,
          message: '数量不能为空',
          trigger: 'blur'
        }],
        duration: [{
          required: true,
          message: '时长不能为空',
          trigger: 'blur'
        }],
        onetype: [{
          validator: validateOne,
          trigger: 'blur',
          type: 'array',
        }],
        twotype: [{
          required: true,
          message: '二级分类不能为空',
          trigger: 'blur'
        }]
      },
    };
  },

  methods: {
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(
              `/generator/doctorrecuperate/info/${this.dataForm.id}`
            ),
            method: "post",
            params: this.$http.adornParams()
          }).then(({
            data
          }) => {
            if (data && data.code == 0) {
              this.dataForm.name = data.doctorrecuperate.name,
                this.dataForm.password = data.doctorrecuperate.password;
              this.dataForm.foodname = data.doctorrecuperate.foodname;
              this.dataForm.threetype = data.doctorrecuperate.threetype;
              this.dataForm.physical = data.doctorrecuperate.physical;
              this.dataForm.enable = data.doctorrecuperate.enable;
              this.dataForm.duration = data.doctorrecuperate.duration;
              this.getOne(true);
              this.dataForm.onetype = data.doctorrecuperate.onetype;
              this.one = data.doctorrecuperate.onetype;
              this.two = data.doctorrecuperate.twotype;
              this.dataForm.twotype = data.doctorrecuperate.twotype;
              this.three1 = data.doctorrecuperate.threeType1;
              this.three2 = data.doctorrecuperate.threeType2;
              this.three3 = data.doctorrecuperate.threeType3;
              // 二级菜单回显
              this.$http({
                url: this.$http.adornUrl("/generator/doctortwo/rangeList"),
                method: "post",
                params: this.$http.adornParams({
                  onetype: this.dataForm.onetype
                })
              }).then(({
                data
              }) => {
                if (data && data.code === 0) {
                  this.options2 = data.page;
                  this.dataForm.twotype=this.two;
                  console.log(  this.two === this.dataForm.twotype);
                  // 三级级菜单回显
                  this.$http({
                    url: this.$http.adornUrl("/generator/doctorthree/rangeList"),
                    method: "post",
                    params: this.$http.adornParams({
                      onetype: this.dataForm.onetype,
                      twotype: this.dataForm.twotype
                    })
                  }).then(({
                    data
                  }) => {
                    if (data && data.code === 0) {
                      this.options3 = data.page;
                      this.dataForm.threetype1 = this.three1;
                      this.dataForm.threetype2 = this.three2;
                      this.dataForm.threetype3 = this.three3;
                    } else {
                      this.dataList = [];
                      this.totalPage = 0;
                    }
                    this.dataListLoading = false;
                  });
                } else {
                  this.dataList = [];
                  this.totalPage = 0;
                }
                this.dataListLoading = false;
              });
            }
          });
        }
      });
      //新增时默认把一级选项查询出来
      if (id == null) {
        this.getOne();
      }
    },

    open2() {
      this.$message({
        message: '操作成功',
        type: 'success'
      });
    },
    //一级菜单选择框

    getOne: function(del) {
      this.$http({
        url: this.$http.adornUrl("/generator/doctorone/list"),
        method: "post",
        params: this.$http.adornParams({})
      }).then(({
        data
      }) => {
        if (data && data.code === 0) {
          this.options1 = data.page.list;
          // if(!del){
          //  this.options2 = [];
          //   this.options3 = [];
          // }

        } else {
          this.dataList = [];
          this.totalPage = 0;
        }

        this.dataListLoading = false;
        return true;
      });

    },

    //二级菜单选择框
    checkForm: function(e) {
      if (this.one && this.tow) return true;
      this.errors = [];
      if (!this.one) this.errors.push("请选择一级");
      if (!this.tow) this.errors.push("请选择二级");
      e.preventDefault();
    },


    getTow: function(onetype) {
      this.$http({
        url: this.$http.adornUrl("/generator/doctortwo/list"),
        method: "post",
        params: this.$http.adornParams({
          onetype: this.dataForm.onetype
        })
      }).then(({
        data
      }) => {
        if (data && data.code === 0) {
          this.options2 = data.page.list;
          // this.options3 = [];
        } else {
          this.dataList = [];

          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },

    getThree: function() {
      this.$http({
        url: this.$http.adornUrl("/generator/doctorthree/list"),

        method: "post",

        params: this.$http.adornParams({
          // page: this.pageIndex,

          // limit: this.pageSize

          onetype: this.dataForm.onetype,

          twotype: this.dataForm.twotype
        })
      }).then(({
        data
      }) => {

        if (data && data.code === 0) {
          this.options3 = data.page.list;
        } else {
          this.dataList = [];

          this.totalPage = 0;
        }

        this.dataListLoading = false;
      });
    },

    // 表单提交

    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/generator/doctorrecuperate/${
              !this.dataForm.id ? "save" : "update"
            }`
            ),
            method: "post",
            data: this.$http.adornData({
              id: this.dataForm.id || undefined,
              name: this.dataForm.name,
              password: this.dataForm.password,
              foodname: this.dataForm.foodname,
              threetype: `${this.dataForm.threetype1},${this.dataForm.threetype2},${this.dataForm.threetype3}`,
              physical: this.dataForm.physical,
              enable: this.dataForm.enable,
              twotype: this.dataForm.twotype,
              duration: this.dataForm.duration,
              onetype: this.dataForm.onetype
            })
          }).then(({
            data
          }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      })
    }
  }
};

el: "";
</script>
